<template><div><h2 id="下拉菜单" tabindex="-1"><a class="header-anchor" href="#下拉菜单"><span>下拉菜单</span></a></h2>
<p>Dcat Admin 中文文档 /</p>
<h2 id="下拉菜单-1" tabindex="-1"><a class="header-anchor" href="#下拉菜单-1"><span>下拉菜单</span></a></h2>
<p>通过<code v-pre>Dcat\Admin\Widgets\Dropdown</code>这个类可以快速帮大家构建下拉菜单功能。</p>
<h3 id="基本用法" tabindex="-1"><a class="header-anchor" href="#基本用法"><span>基本用法</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Dropdown</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称1'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称2'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称3'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称4'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称5'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$dropdown</span> <span class="token operator">=</span> <span class="token class-name static-context">Dropdown</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">button</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'分类导航'</span><span class="token punctuation">)</span> <span class="token comment">// 设置按钮</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">buttonClass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'btn btn-white  waves-effect'</span><span class="token punctuation">)</span> <span class="token comment">// 设置按钮样式</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$label</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token comment">// 格式化菜单选项</span></span>
<span class="line">                <span class="token variable">$url</span> <span class="token operator">=</span> <span class="token function">admin_url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categories/'</span><span class="token operator">.</span><span class="token variable">$key</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;a href='<span class="token interpolation"><span class="token variable">$url</span></span>'><span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$label</span><span class="token punctuation">}</span></span>&lt;/a>"</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$dropdown</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/de6d4ddd-ec0d-44e7-a91c-f1f50581486f-G0Q7aJKTVc.png" alt=""></p>
<h3 id="点击菜单更换按钮文本" tabindex="-1"><a class="header-anchor" href="#点击菜单更换按钮文本"><span>点击菜单更换按钮文本</span></a></h3>
<p><code v-pre>click</code>方法可以让选中的菜单文本显示在按钮中，做到类似下拉选框的效果。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$dropdown</span> <span class="token operator">=</span> <span class="token class-name static-context">Dropdown</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">button</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'选择'</span><span class="token punctuation">)</span> <span class="token comment">// 设置按钮</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置标题" tabindex="-1"><a class="header-anchor" href="#设置标题"><span>设置标题</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$options1</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'名称1'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'名称2'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$options2</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'测试1'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'测试2'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$dropdown</span> <span class="token operator">=</span> <span class="token class-name static-context">Dropdown</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">button</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'使用标题'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token variable">$options1</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'标题1'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token variable">$options2</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'标题2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/c1793605-a5e3-4e71-b2c4-7cc91112629f-dLjBHFtuwt.png" alt=""></p>
<h3 id="增加分割线" tabindex="-1"><a class="header-anchor" href="#增加分割线"><span>增加分割线</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'名称1'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'名称2'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token class-name static-context">Dropdown</span><span class="token operator">::</span><span class="token constant">DIVIDER</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'名称3'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'名称4'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$dropdown</span> <span class="token operator">=</span> <span class="token class-name static-context">Dropdown</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">button</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'使用分割线'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/b12382e4-9fd4-4916-8d4b-6434bd5d5a3b-tBnFKHQGtS.png" alt=""></p>
<h3 id="自定义按钮" tabindex="-1"><a class="header-anchor" href="#自定义按钮"><span>自定义按钮</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称1'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称2'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称3'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称4'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'名称5'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$dropdown</span> <span class="token operator">=</span> <span class="token class-name static-context">Dropdown</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$label</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token comment">// 格式化菜单选项</span></span>
<span class="line">                <span class="token variable">$url</span> <span class="token operator">=</span> <span class="token function">admin_url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categories/'</span><span class="token operator">.</span><span class="token variable">$key</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;a href='<span class="token interpolation"><span class="token variable">$url</span></span>'><span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$label</span><span class="token punctuation">}</span></span>&lt;/a>"</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string single-quoted-string">'dropdown'</span><span class="token operator">></span></span>
<span class="line">     <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string single-quoted-string">'btn btn-primary dropdown-toggle'</span> data<span class="token operator">-</span>toggle<span class="token operator">=</span><span class="token string single-quoted-string">'dropdown'</span><span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string single-quoted-string">'feather icon-email'</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">></span> 自定义按钮 </span>
<span class="line">     <span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span></span>
<span class="line">     <span class="token punctuation">{</span><span class="token variable">$dropdown</span><span class="token operator">-></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>            </span>
<span class="line"><span class="token constant">HTML</span>            </span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/98e2a68c-e837-4730-9e6c-12d8e0b5f5cc-tmLxWdOZoA.png" alt=""></p>
</div></template>


